<template>
	<view class="page custom-page">
		<custom-head gradient back title="添加宝箱"></custom-head>
		<view class="giftSend">
			<view class="content">
				<view class="item1 flex a-center" @tap="showSelect = true">
					<view class="label">宝箱分类</view>
					<view class="value flex a-center jlr">
						<!-- <view>{{ form.treasureType? form.treasureType : '请选择分类'   }}</view>
						<u-icon name="arrow-right" color="#91959B" size="26"></u-icon> -->
						<view>{{ form.treasureType? form.treasureType : '请选择分类'   }}</view>
						<u-select v-model="showSelect" :list="selectList" @confirm="confirm" :default-value="selectIndex"></u-select>
						<u-icon name="arrow-right" color="#91959B" size="26"></u-icon>
					</view>
				</view>
				
				<view class="item1 flex a-center">
					<view class="label">宝箱名称</view>
					<view class="value count">
						<u-input placeholder="请输入礼品名称" input-align="left"  v-model="form.treasureName"
						placeholderStyle="color: #303133;"/>
					</view>
				</view>

				<view class="item1 flex a-center">
					<view class="label">宝箱主图图片</view>
					<u-upload 
						:action="BASE_URL + '/file/upload'" 
						:file-list="fileList" 
						:header="{ Authorization: token }"
						:form-data="{ type: 'avatar' }"
						@on-change="onSuccess"
						@on-remove="omRemove"
						width="140rpx" height="140rpx" maxCount="1">
						<view slot="addBtn" class="slot-btn upload_box" hover-class="slot-btn__hover" hover-stay-time="150">
							<view>+</view>
							<view>上传照片</view>
						</view>
					</u-upload>
				</view>

				<view class="item1 flex a-center">
					<view class="label">详情介绍</view>
					<u-input type="textarea" :height="100" :auto-height="true" :border="true" v-model="form.details" placeholderStyle="color: #303133;" />
				</view>

				<view class="item1 flex a-center">
					<view class="label">积分奖励数量</view>
					<view class="value count">
						<u-input type="number" input-align="left" v-model="form.count" placeholder='0' placeholderStyle="color: #303133;"/>
					</view>
				</view>

				<view class="item1 flex a-center switch">
					<view class="label">宝箱上架</view>
					<u-switch v-model="form.status"></u-switch>
				</view>
			</view>
			
			<view class="button submit" @click="goBack">保存</view>
		</view>
		
		<u-popup v-model="giftShow" closeable mode="bottom">
			<view class="bao_content">
				<view class="selectGiftBody flex wrap">
					<view class="item" v-for="i in 2" :class="{'on':giftIndex==i}" @tap="giftIndex = i">
						<view class="tag">24</view>
						<view class="image"><image src="../../static/uni.png" mode="widthFix" /></view>
						<view class="text">
							<h4>塔克飞机积木</h4>
							<p>积分：2000</p>
						</view>
					</view>
				</view>
				<view class="bao_buttom">
					<view class="button submit" style="margin-top: 20rpx; border-radius: 10rpx; wid" @tap="giftShow = false">确定</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import { getTreasure_type } from '../../api/modules/treasure_type';
import { getTreasureDetail, updateTreasure, addTreasure } from '../../api/modules/treasure';
import { BASE_URL } from '../../api/config'
	export default {
		data() {
			return {
				giftIndex:0,
				giftShow:false,//选择宝箱
				form: { // input 输入框中的内容
					treasureType: '', // 1:成长宝箱,2:任务宝箱
					treasureName: '',
					img: '',
					details: '',
					count: '',
					status: false, // 宝箱是否上架 1：发布，0不发布
				},
				BASE_URL,
				token: uni.getStorageSync('token'),
				static_uri: getApp().globalData.glb_list.config.static_uri, // 获取全局配置文件
				action: 'http://www.example.com/upload',
				fileList: [],

				showSelect: false,
				selectIndex: [0],  // 宝箱分类默认选中的下标
				selectList: [], // 宝箱分类
				pageId: '', // 页面的id
			};
		},
		onLoad(params) {
			console.log('params', params, getApp().globalData.glb_list.config.static_uri)
			if (params.id) {
				this.pageId = params.id
				this._getTreasureDetail(params.id);
			}
			this._getTreasure_type();
		},
		mounted() {
		},
		methods: {
			// 注意返回值为一个数组，单列时取数组的第一个元素即可(只有一个元素)
			confirm(e) {  // 宝箱分类
				let index = this.selectList.findIndex((i) => i.value === e[0].value)
				this.selectIndex = [index];
				this.form.treasureType = e[0].label;
			},
			omRemove(index) { // 移除照片
				if (index === 0) {
					this.fileList = []
					this.form.img = ''
				}
			},
			onSuccess(data) {  // 照片上传
				const res = JSON.parse(data.data)
				console.log('res-img', res)
				if (res.code == 201) {
					this.form.img = res.data.path
				} else {
					this.$refs.uUpload.clear()
					this.$u.toast('上传失败')
				}
			},
			
			goBack() {
				const { treasureType, treasureName, img, details, count, status } = this.form || {};
				let data = {
					type: treasureType === '成长宝箱' ? 1 : 2, // 1:成长宝箱,2:任务宝箱
					name: treasureName,
					avatar: img,
					desc: details,
					points: count,
					status: status ? 1 : 0, // 宝箱是否上架 1：发布，0不发布
					sid: this.glbId,
				}

				if (this.pageId) { // 编辑
					this._updateTreasure(this.pageId, data)
				} else {
					this._addTreasure(data);
				}
				console.log('保存页面', data)
				
			},
			_addTreasure(data) {
				addTreasure(data).then((res) => {
					const { code } = res || {}
					if (code === 201) {
						this.$u.toast('添加成功')
						uni.navigateBack({
							delta:1,
						})
					}
				})
			}, 
			_updateTreasure(id, data) { // 修改宝箱
				updateTreasure(id, data).then((res) => {
					console.log('修改宝箱', res)
					const { code } = res || {}
					if (code === 201) {
						this.$u.toast('修改成功')
						uni.navigateBack({
							delta:1,
						})
					}
				})
			},
			_getTreasure_type() { // 获取宝箱分类
				getTreasure_type().then((res) => {
					const { code, data } = res || {}
					if (code === 200) {
						// console.log('宝箱分类-res', res)
						this.selectList = data.list.map((i) => ({value: i.id, label: i.id === 1 ? '成长宝箱' : '任务宝箱'}))
					}
				})
			},
			_getTreasureDetail(id) { // 获取添加宝箱详情
				getTreasureDetail(id).then((res) => {
					const { code, data  } = res || {};
					const { name, status, points, desc, type, avatar } = data || {};
					if (code === 200) {
						this.form = {
							treasureName: name,
							status: status? true : false,
							count: points,
							details: desc,
							treasureType: type ? '成长宝箱' : '任务宝箱',
							img: avatar, // 图片
						}
						this.fileList = [{ url: `${this.static_uri}${avatar}` }]
					}
				});
			}
		}
	};
</script>

<style scoped lang="scss">
	.page{
		height: 100vh; 
		background-color: #fff;
	}
	.giftSend{
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 100%;
		padding: 60rpx 35rpx 10rpx;
	}
	.item1{margin-bottom: 30rpx;}
	.label{width: 200rpx; font-size: 30rpx; line-height: 80rpx;white-space:nowrap;}
	.value{border: 1px solid #F0F0F0; flex: 1; height: 80rpx; padding: 0 20rpx;}
	.count{text-align: right;}
	.value input{text-align: right; width: 100%; height: 100%; }
	.button {
		width: 686rpx;
		height: 88rpx;
		border-radius: 44rpx;
		/* margin: 80rpx 0 40rpx 0; */
		background-color: #2979FF;
		color: #fff;
		font-size: 32rpx;
		text-align: center;
		line-height: 88rpx;
		/* margin: auto; */
		margin-top: 50rpx;
	}
	.selectGiftBody{
		width:100%; padding: 10rpx; padding-left: 0; padding-top: 50px;
		.item{width: 234rpx; height: 274rpx; position: relative; background: #F4F4F4; border: 1px solid #F4F4F4; border-radius: 10rpx; margin-left: 10rpx; margin-top: 10rpx; padding: 10rpx;}
		.item.on{border: 1px solid #2979FF; background-color: #EAF4FF;}
		.image{width: 150rpx; height: 150rpx; border-radius: 10px; overflow: hidden; margin:10rpx auto;}
		.text{font-size: 24rpx; color: #F84638; text-align: center;}
		.text h4{font-size: 28rpx; color: #303133;}
		.tag{width: 42rpx; font-size: 24rpx; text-align: center; line-height: 42rpx; color: #fff; position: absolute; right: -5rpx; top: -5rpx; background-color: #F84638; border-radius: 50%;}
	}
	.selectUserBody{
		width:100%; padding: 8rpx; padding-left: 6rpx; padding-top: 50px;
		.item{
			width: 180rpx;
			padding-bottom: 17rpx;
			background: #F4F4F4;
			border: 1px solid #F4F4F4;
			border-radius: 8rpx;
			margin-left: 4rpx;
			margin-bottom: 5rpx;
		}
		.item.on{border: 1px solid #2979FF; background-color: #EAF4FF;}
	}
	.touxiang{width: 120rpx; height: 120rpx; border-radius: 50%; overflow: hidden; margin: auto; margin-top: 17rpx;}
	.jifen{color: #F93534; font-size: 24rpx; text-align: center;}
	.username{text-align: center; font-size: 26rpx;}

  .u-list-item .u-preview-wrap {
    width: 140rpx !important;
    height: 140rpx !important;
  }
  .upload_box {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column;
    width: 140rpx;
    height: 140rpx;
    font-size: 25rpx;
    background: #f8f8f8;
  }
  .switch {
    display: flex;
    justify-content: space-between;
  }
</style>